<template>
  <div style="margin-bottom: 20px;"
       class="flex alignCenter between"
  >
    <a-form
      layout="inline"
      :model="queryFrom"
    >
      <a-form-item>
        <a-input v-model:value="queryFrom.key" placeholder="查询条件"/>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="search">搜索</a-button>
      </a-form-item>
      <a-form-item>
        <a-button @click="reset">重置</a-button>
      </a-form-item>
    </a-form>
    <a-button type="primary" v-auth="['article:category:add']" @click="show=true">新增</a-button>
  </div>
  <a-table :columns="columns"
           :data-source="dataList"
           :pagination="pagination"
           rowKey="id"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex!=='operation'">
        <span>{{record[column.dataIndex]}}</span>
      </template>
      <template v-if="column.dataIndex==='operation'">
        <div style="display: flex;width: 100%;justify-content: center;align-items: center">
          <div v-auth="['article:category:update']">
            <a-button type="link" size="small" @click="openModel(record)">编辑</a-button>
          </div>
          <div  v-auth="['article:category:delete']">
            <a-popconfirm
               title="确定删除吗"
               @confirm="remove(record)"
               ok-text="确定"
               cancel-text="取消"
            >
              <a-button danger type="link" size="small">删除</a-button>
            </a-popconfirm>
          </div>
        </div>
      </template>
    </template>
  </a-table>
  <add-or-update v-model="show" :row="category" @success="success"/>
</template>
<script setup lang="ts">
  import {onMounted, ref, defineComponent} from "vue";
  import {message} from "ant-design-vue";
  import {queryList,del} from '@/api/article/category.ts'
  import AddOrUpdate from "./add-or-update.vue";
  defineComponent({
    AddOrUpdate
  })
  const generateQueryFrom = ()=>{
    return{
      key:'',
      page:1,
      limit:10
    }
  }
  const generatePagination = ()=>{
    return{
      current:1,
      size:10,
      total:0
    }
  }
  const queryFrom = ref(generateQueryFrom())
  const pagination = ref(generatePagination())
  const category = ref(null)
  const dataList = ref([])
  const columns = [
    {
      title: '分类名称',
      dataIndex: 'name',
      key: 'name',
      align:'center'
    },
    {
      title: '排序',
      dataIndex: 'sort',
      key: 'sort',
      align:'center'
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      align:'center'
    },
    {
      title: '操作',
      dataIndex:'operation',
      key: 'operation',
      align:'center'
    }
  ];


  const show = ref(false)
  const getList = ()=>{
    queryList(queryFrom.value).then((res:any)=>{
      dataList.value = res.result.records;
      pagination.value.total = res.result.total
    })
  }

  const openModel = (row:any)=>{
    category.value = {...row};
    show.value =true;
  }
  const success =()=>{
    message.success('操作成功');
    show.value = false;
    getList();
  }
  const remove = (id:number|string)=>{
    del(id).then((res:any)=>{
      if(res&&res.code===200){
        message.success("操作成功");
        getList()
      }
    })
  }
  const search = ()=>{
    queryFrom.value.page = 1;
    getList();
  }
  const reset = ()=>{
    queryFrom.value = generateQueryFrom();
    getList();
  }
  onMounted(()=>{
    getList();
  })
</script>
<style scoped lang="scss">

</style>
